'use strict';

var React = require('react');
var Router = require('react-router'); 
var RouteHandler = Router.RouteHandler;

var CHECKBOX_DEFAULT = 0;
var CHECKBOX_HOVER = 1;
var CHECKBOX_CHECK = 2;
var CHECKBOX_DISABLE = 3;

var CheckBoxComponent = React.createClass({
  getInitialState : function(){
   return { check : CHECKBOX_DEFAULT }; 
  },
  handleChange : function(e){
      e.stopPropagation();
      var self = this;
      var curState = this.state.check == CHECKBOX_HOVER ? CHECKBOX_CHECK : CHECKBOX_DEFAULT ;
      this.setState({ check : curState });
      if( typeof(self.props.onClick) == 'function' )
        self.props.onClick(e,{ checkState : curState });
  },
  handleHover : function(){
    if(this.state.check == CHECKBOX_DEFAULT)
      this.setState({ check : CHECKBOX_HOVER });
  },
  handleOut : function(){
    if(this.state.check == CHECKBOX_HOVER)
    this.setState({ check : CHECKBOX_DEFAULT });
  },
  componentDidMount : function(){
    var props = this.props;
    if(props.check){
        this.setState({ check : CHECKBOX_CHECK });
    }
  },
  render: function() {
    if(this.props.disable){
      icons = <span className="do-checkbox-disable"></span>
        return (
        /* jshint ignore:start */
            <div className="do-checkbox">
              { icons }
              <input type="checkbox"  />{ this.props.value }
            </div>
        /* jshint ignore:end */
      );
    };


    var icons;
    switch(this.state.check){
      case CHECKBOX_DEFAULT:
        icons = <span className="do-checkbox-default"></span>;
        break;
      case CHECKBOX_HOVER:
        icons = <span className="do-checkbox-hover"></span>;
        break;
      case CHECKBOX_CHECK:
        icons = <span className="do-checkbox-check"></span>;
        break;
    };
    if(this.props.disable){
      icons = <span className="do-checkbox-disable"></span>
    };
    
    return (
      /* jshint ignore:start */
          <div className="do-checkbox" onClick={this.handleChange} onMouseEnter={ this.handleHover } onMouseLeave={this.handleOut}>
            { icons }{ this.props.value }
          </div>
      /* jshint ignore:end */
    );
  }
});

module.exports = CheckBoxComponent;
